<template>
  <ul class="header-bar">
    <li
      :class="{'active': listIndex == index }"
      v-for="(item,index) in sunbList"
      :key="index"
      @click="pageChange(item)"
    >{{item.name}}</li>
  </ul>
</template>

<script>
export default {
  props:['listIndex'],
  data() {
    return {
      sunbList: [
        { name: "运动户外", link: "/TaoAction/clothesSub" },
        { name: "潮流服饰", link: "/TaoAction/fashionClothes" },
        { name: "鞋包配饰", link: "/TaoAction/shoeBags" },
        { name: "数码家电", link: "/TaoAction/digital" },
        { name: "更多美妆", link: "/TaoAction/more" }
      ],
      pagePicArr: []
    };
  },
  methods: {
    pageChange(item) {
      jump2url(`${window.location.origin}${item.link}`);
    }
  }
};
</script>

<style lang="less" scoped>
.header-bar {
  display: flex;
  width: 100%;
  height: 0.7rem;
  line-height: 0.7rem;
  background: #c30035;
  color: #fff;
  font-size: 0.24rem;
  position: fixed;
  z-index: 50;
  top: 0;
  li {
    flex: 1;
    text-align: center;
    &.active {
      color: red;
      background: #fdd985;
    }
  }
}
</style>